<!-- 积分设置弹窗 -->
<template>
  <el-dialog
    class="integralModel dialogAdapter"
    :destroy-on-close="true"
    style="border-radius: 10px"
    @close="handleClose"
    v-model="props.visible"
    :title="'积分设置'"
  >
    <!--from -->
    <el-form ref="ruleFormRef" :model="d.form" label-position="top">
      <el-form-item
        prop="type"
        label="设置类型"
        :rules="[{ required: true, message: '请选择类型', trigger: 'change' }]"
      >
        <el-select style="width: 100%" v-model="d.form.type" placeholder="请选择类型">
          <el-option label="生图次数" value="image" />
          <el-option label="语音次数" value="voice" />
          <el-option label="对话次数" value="chat" />
          <el-option label="模型次数" value="model" />
        </el-select>
      </el-form-item>

      <el-form-item prop="numb" label="数量" :rules="[{ required: true, message: '请输入数量' }]">
        <el-input
          maxlength="5"
          type="text"
          v-model.number="d.form.numb"
          onkeyup="value=value.replace(/^(-|+)?\d+(.\d+)?$/g,'')"
          placeholder="请输入次数"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="danger" @click="submitForm(ruleFormRef)"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance } from "element-plus"
import { onMounted, reactive, ref } from "vue"
// @ts-ignore
import { APIIntegralSetting } from "@/api/apiSetting"
import debounce from "@/utils/debounce"

interface Props {
  editData?: any
  type?: string
  visible: boolean
}

const emits = defineEmits(["editDpData", "close"])
const props = defineProps<Props>()
const ruleFormRef = ref()

const d = reactive({
  form: {
    type: "",
    numb: "",
    user_id: ""
  }
})

onMounted(() => {
  if (props.editData) {
    d.form.user_id = props.editData.user_id
  }
})

// 提交
const submitForm = debounce((formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const { code } = await APIIntegralSetting(d.form)
      if (code === 200) {
        handleClose()
        ElMessage({
          type: "success",
          message: "设置成功"
        })
        emits("editDpData")
      }
    } else {
      console.log("error submit!")

      return false
    }
  })
}, 300)

const handleClose = () => {
  emits("close")
}
</script>
<style lang="scss" scoped></style>
